<template>
  <view class="login-container">
    <view class="login-header">
      <text class="title">账号密码登录</text>
    </view>

    <view class="login-form">
      <view class="form-item">
        <uni-icons type="person" size="20" color="#666"></uni-icons>
        <input 
          type="text"
          v-model="form.username"
          placeholder="请输入用户名/手机号"
          placeholder-class="placeholder"
        />
        <view class="clear-btn" v-if="form.username" @click="form.username = ''">
          <uni-icons type="clear" size="20" color="#999"></uni-icons>
        </view>
      </view>

      <view class="form-item">
        <uni-icons type="locked" size="20" color="#666"></uni-icons>
        <input
          :type="showPassword ? 'text' : 'password'"
          v-model="form.password"
          placeholder="请输入密码"
          placeholder-class="placeholder"
        />
        <view class="eye-btn" @click="showPassword = !showPassword">
          <uni-icons :type="showPassword ? 'eye-filled' : 'eye'" size="20" color="#999"></uni-icons>
        </view>
      </view>

      <button 
        class="submit-btn" 
        :disabled="!form.username || !form.password"
        :class="{ 'btn-active': form.username && form.password }"
        @click="handleLogin"
      >
        登录
      </button>

      <view class="form-footer">
        <navigator url="/pages/user/auth/register" class="link">注册账号</navigator>
        <navigator url="/pages/user/auth/phone-login" class="link">手机号登录</navigator>
      </view>
    </view>

    <!-- 其他登录方式 -->
    <view class="other-login" v-if="otherLoginMethods.length > 0">
      <view class="divider">
        <text>其他登录方式</text>
      </view>
      <view class="login-methods">
        <view 
          class="method-item"
          v-for="method in otherLoginMethods"
          :key="method.type"
          @click="handleOtherLogin(method.type)"
        >
          <uni-icons :type="method.icon" size="32" color="#666"></uni-icons>
          <text>{{ method.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      showPassword: false,
      otherLoginMethods: [
        {
          type: 'wechat',
          name: '微信登录',
          icon: 'weixin'
        }
      ]
    }
  },

  methods: {
    async handleLogin() {
      try {
        if (!this.form.username || !this.form.password) {
          uni.showToast({
            title: '请输入账号和密码',
            icon: 'none'
          })
          return
        }

        // 显示加载提示
        uni.showLoading({
          title: '登录中...',
          mask: true
        })

        const { data } = await this.$api.user.auth.login({
          username: this.form.username,
          password: this.form.password
        })

        // 存储登录信息
        uni.setStorageSync('token', data.token)
        // 存储用户信息
        const userInfo = {
          id: data.user.id,
          username: data.user.username,
          nickname: data.user.nickname,
          avatar: data.user.avatar,
          phone: data.user.phone,
          email: data.user.email
        }
        uni.setStorageSync('userInfo', userInfo)

        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })

        // 返回上一页或首页
        const pages = getCurrentPages()
        if (pages.length > 1) {
          uni.navigateBack()
        } else {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '登录失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    handleOtherLogin(type) {
      // 根据类型处理第三方登录
      uni.showToast({
        title: '暂未开放，敬请期待',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background-color: #fff;
  padding: 40rpx;
}

.login-header {
  margin: 60rpx 0;
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
  }
}

.login-form {
  .form-item {
    display: flex;
    align-items: center;
    height: 100rpx;
    border-bottom: 2rpx solid #eee;
    margin-bottom: 20rpx;

    input {
      flex: 1;
      height: 100%;
      margin: 0 20rpx;
      font-size: 32rpx;
    }

    .clear-btn,
    .eye-btn {
      padding: 10rpx;
    }
  }

  .placeholder {
    color: #999;
    font-size: 32rpx;
  }

  .submit-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background-color: #ddd;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    margin: 60rpx 0 40rpx;

    &.btn-active {
      background-color: #ff5500;
    }

    &:active {
      opacity: 0.8;
    }
  }

  .form-footer {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    color: #666;

    .link {
      color: #666;

      &:active {
        opacity: 0.8;
      }
    }
  }
}

.other-login {
  margin-top: 100rpx;

  .divider {
    position: relative;
    text-align: center;
    margin-bottom: 60rpx;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 30%;
      height: 2rpx;
      background-color: #eee;
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
    }

    text {
      display: inline-block;
      padding: 0 30rpx;
      font-size: 24rpx;
      color: #999;
      background-color: #fff;
    }
  }

  .login-methods {
    display: flex;
    justify-content: center;
    gap: 100rpx;

    .method-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;

      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
</style> 